<style scoped lang="less">
.index {
  width: 100%;

  h1 {
    height: 150px;
    img {
      height: 100%;
    }
  }
  h2 {
    color: #666;
    margin-bottom: 200px;
    p {
      margin: 0 0 50px;
    }
  }
  .ivu-row-flex {
    height: 100%;
  }
}
ul.ivu-list-items li.ivu-list-item {
  padding-left: 12px;
  padding-right: 12px;
}
</style>
<template>
  <div class="index">
    <List item-layout="vertical">
      <ListItem v-for="item in dataSource" :key="item.id">
        <div @click="handleNext(item.mediaId)">
          <ListItemMeta
            :avatar="item.avatar"
            :title="item.title"
            :description="item.description"
          />
        </div>
        <template slot="action">
          <li>作者：{{ item.author }}</li>
          <li>出版社：{{ item.publisher }}</li>
        </template>
        <template slot="extra">
          <img
            :src="item.mediaPic"
            style="width: 140px"
            @click="handleNext(item.mediaId)"
          />
        </template>
      </ListItem>
    </List>
  </div>
</template>
<script>
import { axios } from '../../static/js/axiosTool';
export default {
  name: "home",
  data() {
    return {
      dataSource: [],
    };
  },
  mounted() {
    this.getLibray();
  },
  methods: {
    handleNext(id) {
      this.$router.push({
        name: "List",
        params: {
          id: id,
        },
      });
      //window.location.hash=`#/list/${id}`
    },
    getLibray() {
      let url = "books";
      let params = {
        filter: {
          /* where:{
                            title:'Python编程从入门到精通'
                        } */
        },
      };
      this.$ajax("get", url, params).then((res) => {
        console.log(`请求成功：${res.status}`);
        this.$data.dataSource = res.data;
      });
    },
  },
};
</script>
